<template>
	<view>
		<cu-custom
			:isBack="true"
			:style="Template.top.bgstyle == '系统风格' ? 'background:' + Template.top.bgcolor : ''"
		>
			<block slot="backText"></block>
			<block slot="content"><text :style="Template.top.bgstyle == '系统风格' ? 'color:white'  : 'color:black'">会员中心</text></block>
		</cu-custom>
		<view class="body class-1" >
		
		<view :style="Template.top.bgstyle == '系统风格' ? 'background:' + Template.top.bgcolor+' url('+topbg+' ) no-repeat': 'background-image:url(' + ImgDomain + Template.top.bgimage +')'">
			<view class="cu-list menu-avatar b-top padding-right margin-bottom-xl pt50">
				<view class="cu-item bg-transparent no-after-none">
					<view class="cu-avatar round"><image :src="UserInfo.HeadIMg"></image></view>
					<view class="content flex-sub">
						<navigator class=" margin-bottom-xs fs32" :style="'color:' + Template.top.fontcolor" v-html="UserInfo.NickName"></navigator>
						<view class="new_user" :style="'display: none;color:' + Template.top.fontcolor">新用户注册送50元优惠券</view>
					</view>
					<view class="cu-item-foot flex">
						<view class="red_badge" style="margin-right: 50upx;position: relative;display: none;"><image :src="imgurl + 'icon_notice.png'" mode=""></image></view>
						<navigator url="/pages/my/setting/index"><image :src="imgurl + 'icon_set.png'" mode=""></image></navigator>
					</view>
				</view>
			</view>

			<view
				class="flex justify-between card_box"
				:style="
					(Template.membercard.status ? '' : 'display: none;') +
						(Template.membercard.bgstyle == '系统风格'
							? 'background-color:' + Template.membercard.bgcolor
							: 'background-image:url(' + ImgDomain + Template.membercard.bgimage + ')')
				"
			>
				<view>
					<image :src="imgurl + 'icon_vip.png'" mode="" class="img20 mr10"></image>
					<text class="fs22" :style="'color:' + Template.membercard.fontcolor">获取会员卡权益更优惠</text>
				</view>
				<view class="getcard" :style="'color:' + Template.membercard.fontcolor">领取</view>
			</view>
			<view class="qui-card radius5" :style="(Template.currency.status ? '' : 'display: none;') + 'margin-top: 0;'">
				<view class="qui-grids column4 pt30 pb30 tc">
					<navigator url="/pages/my/lingqian" class="qui-grid">
						<view class="ff fs32" v-text="Currency.Balance"></view>
						<view class="tc fs22 mt10">零钱</view>
					</navigator>
					<navigator url="/pages/my/jifen" class="qui-grid">
						<view class="ff fs32" v-text="Currency.Point"></view>
						<view class="tc fs22 mt10">积分</view>
					</navigator>
					<navigator url="/pages/my/card" class="qui-grid">
						<view class="ff fs32" v-text="Currency.Card"></view>
						<view class="tc fs22 mt10">优惠券</view>
					</navigator>
					<navigator url="/pages/my/prizeCenter" class="qui-grid" style="top: -5upx;display: none;">
						<view class="tc"><image :src="imgurl + '/icon_jp.png'" style="width: 50upx;height: 50upx;"></image></view>
						<view class="tc fs22">奖品中心</view>
					</navigator>
					<navigator v-on:tap="adlink({link:'https://hd.onlyid.com.cn/#/pages/myprize/myprize?CustId={custid}&OACustId={oacustid}',type:'diy'})" class="qui-grid" style="top: -5upx;">
						<view class="tc"><image :src="imgurl + '/icon_jp.png'" style="width: 50upx;height: 50upx;"></image></view>
						<view class="tc fs22">奖品中心</view>
					</navigator>
				</view>
			</view>
		
		
		</view>
			<view :style="Template.order.status ? '' : 'display: none;'">
				<view class="qui-cells small-padding bg-transparent">
					<view class="qui-cell">
						<view class="cell-bd fs30 fw600">我的订单</view>
						<view class="cell-ft fs22" v-on:tap="OpenURL(MallDomain + '/Views/Order/OrderList.html?status=0')">查看全部</view>
						<view class="arrow-r"></view>
					</view>
				</view>
				<view class="toolbar radius5 bg-white">
					<view class="cu-list grid col-5 no-border">
						<view class="cu-item" v-for="(item, index) in orderList" :key="index">
							<view v-on:tap="OpenURL(MallDomain + item.navurl)">
								<view><image :src="imgurl + item.imgurl" style="width: 50upx;height: 50upx;"></image></view>
								<text class="fs22" :style="'color:' + Template.order.fontcolor">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="banner-box" :style="Template.advertisement.status ? '' : 'display: none;'">
				<image :src="ImgDomain + Template.advertisement.pic" v-on:click="link(Template.advertisement)"></image>
			</view>

			<view :style="Template.toolmenu.status ? '' : 'display: none;'">
				<view class="qui-cells small-padding bg-transparent">
					<view class="qui-cell"><view class="cell-bd fs30 fw600">拓展工具</view></view>
				</view>
				<view class="toolbar radius5 bg-white">
					<view class="cu-list grid col-4 no-border">
						<view class="cu-item" v-for="(item, index) in Template.toolmenu.menus" :key="index" v-if="item.status">
							<navigator v-on:click="adlink(item)">
								<view>
									<image :src="item.logoway == 'systemlogo' ? 'http://zhengpinkeji.member.pinguanyun.cn/assets/images/u_edit/' + item.systemlogo : ImgDomain + item.diylogo"></image>
								</view>
								<text>{{ item.name }}</text>
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view>
			<view class="cu-tabbar-height"></view>

			<view class="cu-bar tabbar bg-white shadow foot" :style="'background-color:' + Template.bottommenu.bgcolor">
				<view
					class="action"
					v-for="(item, index) in Template.bottommenu.menus"
					:key="index"
					:style="Template.bottommenu.status ? '' : 'display: none;'"
					v-on:click="adlink(item)"
				>
					<view class="cuIcon-cu-image"><image :src="ImgDomain + item.diylogo"></image></view>
					<view class="text-main" :style="Template.bottommenu.fontcolor" v-text="item.name"></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import base from 'utils/base.js';
import tools from 'utils/tools.js';
import service from 'Services/auth.js';
export default {
	data() {
		return {
			CustID: 0,
			OACustId: 0,
			state: '',
			ImgDomain: '',
			MallDomain: '',
			UserInfo: {},
			Currency: { Balance: 0, Point: 0, Card: 0 },
			Menus: [],
			Template: [],
			orderList: [
				{
					name: '待付款',
					imgurl: 'icon_dd01.png',
					navurl: '/Views/Order/OrderList.html?status=1'
				},
				{
					name: '待发货',
					imgurl: 'icon_dd02.png',
					navurl: '/Views/Order/OrderList.html?status=2'
				},
				{
					name: '待收货',
					imgurl: 'icon_dd03.png',
					navurl: '/Views/Order/OrderList.html?status=3'
				},
				{
					name: '待评价',
					imgurl: 'icon_dd04.png',
					navurl: '/Views/Order/OrderList.html?status=4'
				},
				{
					name: '退款/售后',
					imgurl: 'icon_dd05.png',
					navurl: '/Views/Order/OrderList.html?status=5'
				}
			],

			imgurl: this.$imgurl,
			topbg:this.$imgurl+'u_bg_1.png'
		};
	},
	onShow: function() {
		let current = this;
		let globalData = getApp().globalData;
		let time = 0;
		current.CustID = globalData.Customer.CustID;
		current.OACustId = globalData.Customer.OACustId;
		current.state = globalData.ZpAppId;
		current.ImgDomain = globalData.ImgDomain;
		let si = setInterval(function() {
			time = time + 1;
			if (globalData.ticket) {
				current.GetUserCurrency();
				clearInterval(si);
				
				let globalData = getApp().globalData;
				let time = 0;
				current.CustID = globalData.Customer.CustID;
				current.OACustId = globalData.Customer.OACustId;
				current.state = globalData.ZpAppId;
				current.ImgDomain = globalData.ImgDomain;
			}
			if (time > 40) clearInterval(si);
		}, 200);
	},
	methods: {
		OpenURL: function(url) {
			url = url.replace('{custid}', this.CustID);
			url = url.replace('{oacustid}', this.OACustId);
			if (url.indexOf('?') > -1) {
				window.location = url + '&OpenId=' + this.UserInfo.OpenID + '&SysOs=weixin&state=' + this.state;
			} else {
				window.location = url + '?OpenId=' + this.UserInfo.OpenID + '&SysOs=weixin&state=' + this.state;
			}
		},
		GetUserData: function() {
			let currentPage = this;

			let globalData = getApp().globalData;

			let params = {
				type: 'GET',
				url: '/api/UserInfo/GetUserInfo',
				data: {},
				sCallback: function(response) {
					if (response.IsSuccess) {
						let userInfo = response.Data;
						globalData.UserInfo = userInfo;
						currentPage.UserInfo = userInfo;
						uni.setStorageSync('UserInfo', userInfo);
					}
				}
			};
			base.request(params);
		},
		link: function(obj) {
			var link = obj.link;
		link = link.replace('{custid}', this.CustID);
		link = link.replace('{oacustid}', this.OACustId);
			if (obj.linktype == '系统链接') {
				uni.navigateTo({
					url: link
				});
			} else if (obj.linktype == '自定义链接') {
				if (link.indexOf('?') > -1) {
					window.location = link + '&OpenId=' + this.UserInfo.OpenID + '&SysOs=weixin&state=' + this.state;
				} else {
					window.location = link + '?OpenId=' + this.UserInfo.OpenID + '&SysOs=weixin&state=' + this.state;
				}
			}
		},
		adlink: function(obj) {
			var link = obj.link;
			link = link.replace('{custid}', this.CustID);
			link = link.replace('{oacustid}', this.OACustId);
			if (obj.type == 'system' && link.indexOf('http') <= -1) {
				uni.navigateTo({
					url: link
				});
			}else if(link.indexOf('onlyid.com.cn') > -1){
				if (link.indexOf('?') > -1) {
					window.location = link + '&openId=' + this.UserInfo.OpenID + '&SysOs=weixin&state=' + this.state;
				} else {
					window.location = link + '?openId=' + this.UserInfo.OpenID + '&SysOs=weixin&state=' + this.state;
				}
			} else {
				if (link.indexOf('?') > -1) {
					window.location = link + '&OpenId=' + this.UserInfo.OpenID + '&SysOs=weixin&state=' + this.state;
				} else {
					window.location = link + '?OpenId=' + this.UserInfo.OpenID + '&SysOs=weixin&state=' + this.state;
				}
			}
		},
		GetUserCurrency: function() {
			let currentPage = this;
			let globalData = getApp().globalData;
			let params = {
				hideLoading: true,
				type: 'GET',
				url: '/api/UserInfo/GetUserCurrency',
				data: {},
				sCallback: function(response) {
					if (response.IsSuccess) {
						let currency = response.Data;

						currentPage.Currency = currency;
					}
				}
			};
			base.request(params);
		},
		GetTemplate: function() {
			let currentPage = this;
			let params = {
				type: 'GET',
				url: '/api/MagicMall/GetMemberMagicMallTemplate',
				data: { platform: 'All', type: 'MemberCenter' },
				sCallback: function(response) {
					if (response.IsSuccess) {
						let d = response.Data;
						if (d.PageJson) currentPage.Template = JSON.parse(d.PageJson);
					}
					currentPage.GetUserData();
					currentPage.GetMenu();
				}
			};
			base.request(params);
		},
		GetMenu: function() {
			let currentPage = this;

			let params = {
				type: 'GET',
				url: '/api/MemberMenu/GetMemberMenuList',
				data: {},
				sCallback: function(response) {
					if (response.IsSuccess) {
						let list = response.Data;

						currentPage.Menus = list;
					}
				}
			};
			base.request(params);
		}
	},
	onLoad(options) {
	let	current = this;
		if(options.clear==1)
		{
			uni.removeStorage({
			    key: 'ticket',
			    success: function (res) {
			        
			    }
			});
			service.Auth(current, option);
		}
	
	},
	mounted() {
		let current = this;
		let globalData = getApp().globalData;
		let time = 0;
		let si = setInterval(function() {
			time = time + 1;
			if (globalData.ticket) {
				current.MallDomain = globalData.MallDomain;
				current.GetTemplate();
				
				clearInterval(si);
			}
			if (time > 40) clearInterval(si);
		}, 200);
	}
};
</script>

<style lang="scss">
.banner-box {
	margin: 0px 30upx;
}
.banner-box image {
	width: 100%;
	height: 170upx;
}
.toolbar {
	margin: 10upx 20upx;

	image {
		width: 65upx;
		height: 55upx;
	}

	.cu-item text {
		color: #333333;
	}

	.cu-list.grid {
		background-color: transparent;
	}
}

.new_user {
	padding: 0 20upx;
	height: 36upx;
	line-height: 36upx;
	display: inline-block;
	border-radius: 18upx;
	border: solid 1upx #e4cfb7;
	font-size: 22upx;
	color: #e4cfb7;
	text-align: center;
	box-sizing: content-box;
}

.img20 {
	width: 20upx;
	height: 20upx;
}

.card_box {
	border-top-left-radius: 10upx;
	border-top-right-radius: 10upx;
	padding: 20upx;
	margin: 0 60upx;
}

.getcard {
	display: inline-block;
	padding: 0 30upx;
	height: 36upx;
	line-height: 36upx;
	background-color: #181818;
	border-radius: 18upx;
	font-size: 20upx;
	color: #eac490;
}

.red_badge {
	position: relative;

	&:after {
		position: absolute;
		content: '';
		display: inline-block;
		width: 10upx;
		height: 10upx;
		background-color: #ff0000;
		top: -5upx;
		right: -5upx;
		border-radius: 50%;
	}
}

.body {
	width: 100%;
	-webkit-background-size: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
	&.class-1 {
		background-position-y: -80upx;
	}
	.b-top {
		.cu-item {
			.cu-avatar {
				box-sizing: box-center;
				width: 120upx;
				height: 120upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			> .content {
				left: 192upx;
			}
			.cu-item-foot {
				position: absolute;
				top: -10upx;
				right: 0px;
				image {
					width: 40upx;
					height: 40upx;
				}
			}
		}
	}

	.sj-list {
		flex-wrap: wrap;
		justify-content: space-evenly;

		.cu-item {
			display: flex;
			align-items: center;
			width: 350upx;
			height: 140upx;
			background-color: #ffffff;
			border-radius: 10upx;
			margin-bottom: 10upx;
			padding: 0px 30upx;

			image {
				width: 60upx;
				height: 60upx;
			}
		}
	}

	.gg-box {
		background-color: #fff;
		margin: 10upx 20upx;

		.uni-media-list-logo {
			width: 110upx;
			height: 50upx;
		}

		image {
			width: 110upx;
			height: 50upx;
		}

		.uni-media-list-body {
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
</style>
